<div class="layui-card">
    <div class="layui-card-header">检索条件</div>
    <div class="layui-card-body">
        <form id="role-query-form" class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input name="roleName" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">角色类型</label>
                    <div class="layui-input-inline">
                        <select name="roleType">
                            <option value="">请选择</option>
                            <option th:each="dict,roleStat:${roleTypeList}" th:value="${dict.dataCode}" th:text="${dict.dataText}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">角色描述</label>
                    <div class="layui-input-inline">
                        <input name="roleDescribe" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <button class="layui-btn" lay-filter="role-query-submit" lay-submit><i class="layui-icon">&#xe615;</i> 检索</button>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">角色管理</h2>
        <div class="layui-btn-group" style="float: right">
            <button class="layui-btn layui-btn-sm" id="btnAdd"><i class="layui-icon">&#xe654;</i> 增加</button>
            <button class="layui-btn layui-btn-sm layui-btn-disabled" id="btnDel" disabled="true">
            	<i class="layui-icon">&#xe640;</i> 删除
            </button>
        </div>
    </div>
    <div class="layui-card-body" style="padding-top: 0px;">
        <table class="layui-table" id="role-table" lay-filter="role-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="role-table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="perms">权限分配</a>
</script>

<script>
    layui.use(['jquery', 'form', 'table', 'util', 'sadmin', 'element'], function () {
        var $ = layui.$ //重点处
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var sadmin = layui.sadmin;
        var element = layui.element;

        form.render('select');

        // 渲染表格
        table.render({
            elem: '#role-table',
            url: 'system/role/pageList',
            skin: 'line',
            page: true,
            cols: [
                [
                    {type:'checkbox', fixed: 'left'},
                    {type: 'numbers', title: '序号'},
                    {field: 'roleName', sort: true, title: '角色名称'},
                    {field: 'roleTypeText', width: 100, align: 'center', title: '角色类型'},
                    {field: 'roleDescribe', title: '角色描述'},
                    {
                        align: 'center', templet: function (d) {
                            return util.toDateString(d.createTime.time);
                        }, title: '创建时间'
                    },
                    {align: 'center', width: 180, toolbar: '#role-table-bar', fixed: 'right', title: '操作'}
                ]
            ]
        });

      	//监听表格复选框选择状态
        table.on('checkbox(role-table)', function(obj){
        	var checkStatus = table.checkStatus('role-table');
        	var data = checkStatus.data;
        	if (null != data && data.length >0) {
        		$('#btnDel').removeClass('layui-btn-disabled').removeAttr('disabled',"true");
        	}
        	else {
        		$('#btnDel').addClass('layui-btn-disabled').attr('disabled',"true");
        	}
       	});

        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 删除按钮点击事件
        $('#btnDel').click(function () {
            var checkStatus = table.checkStatus('role-table');
            var idsArray = new Array(checkStatus.data.length);
            $.each(checkStatus.data,function(idx, item) {
                idsArray[idx] = item.pid;
            })
            var ids = idsArray.join(',');
            console.log(ids);

            layer.confirm('确定删除所选角色吗？', function (i) {
                layer.close(i);
                layer.load(2);
                $.post('system/role/drop', {
                    ids: ids
                }, function (result) {
                    layer.closeAll('loading');
                    layer.msg(result.msg);
                    table.reload('role-table', {});
                });
            });
        });

        // 工具条点击事件
        table.on('tool(role-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }
            else if (layEvent === 'perms') { //权限分配
            	showEditPerms(data);
            }
        });

        // 显示表单弹窗
        var showEditModel = function (data) {
            console.log(data);
            var title = data ? '修改角色' : '添加角色';
            sadmin.putTempData('system_role', data);
            sadmin.popupCenter({
                title: title,
                path: '/system/role/form',
                finish: function () {
                    table.reload('role-table', {});
                }
            });
        };
        
        var showEditPerms = function(data) {
        	var title = "角色权限分配";
        	sadmin.putTempData('roleid', data.pid);
        	sadmin.popupCenter({
        		title: title,
                path: '/system/role/perms?rolePid='+data.pid,
                area: ['450px', '560px'],
                offset: 'auto',
                finish: function () {
                    table.reload('role-table', {});
                }
            });
        }

        // 搜索提交事件
        form.on('submit(role-query-submit)', function (data) {
            table.reload('role-table', {
                where: data.field
            });
            return false;
        });

    });
</script>